<template>
  <div class="body">
    <van-nav-bar
      title="收货地址"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="addresses" v-if="addresses.newAddressList && addresses.newAddressList.length > 0" >
      <div class="address" v-for="(item,index) in addresses.newAddressList" :key="index" :class="getSpecialItem(index)" >
        <div class="address1">
          <div class="name">{{ item.user }}</div>
          <div class="phone">{{ item.phone }}</div>
        </div>
        <div class="address2">
          <p>
            {{ item.local }}{{ item.detailLocal }}
          </p>
        </div>
        <div class="address3">
          <div class="address3-left">
            <!-- 使用 v-model 来绑定 value -->
            <div class="selDefault" @click="selDefaultAddress(index)">
              设为默认地址
            </div>
          </div>
          <div class="address3-right">
            <div class="del" @click="deleteAddress(index)">删除</div>
            <div class="change" @click="showPopup2(index)">修改</div>
          </div>
        </div>
      </div>
    </div>
    <div class="addresses1" v-else>
      还未有默认地址
    </div>
    <div class="footer">
      <div class="add" @click="showPopup()">新增收货地址</div>
      <van-popup v-model="show" position="right" closeable>
        <div class="add-address">
          <form @submit.prevent="addLocal">
            <div class="input-group">
              <label for="user">用户名</label>
              <input type="text" id="user" name="user" v-model="user" required placeholder="请输入用户名" />
            </div>
            <div class="input-group">
              <label for="phone">电话号码</label>
              <input type="phone" id="phone" name="phone" v-model="phone" required placeholder="请输入电话号码" />
            </div>
            <div class="input-group" @click="showPopup1()">
              <label for="local">地址</label>
              <input type="text" id="local" name="local" v-model="local" required placeholder="请选择地址"/>
            </div>
            <van-popup v-model="show1" position="button">
              <van-area title="请选择" :area-list="areaList" @confirm="onAreaConfirm"  @cancel="onAreaCancel" />
            </van-popup>
            <div class="input-group">
              <label for="detailLocal">详细地址</label>
              <input type="text" id="detailLocal" name="detailLocal" v-model="detailLocal" required placeholder="请填写详细地址地址"  />
            </div>
            <button type="submit" class="btn">添加</button>
          </form>
        </div>
      </van-popup>
    </div>
    <van-popup v-model="show2" position="right" closeable>
        <van-nav-bar
          title="修改收货地址"
          left-arrow
          @click-left="$router.back()"
        />
        <div class="updateAdd-address">
          <form @submit.prevent="updateAddress">
            <div class="input-group">
              <label for="user">用户名</label>
              <input type="text" id="user" name="user" v-model="user1" required placeholder="请输入用户名" />
            </div>
            <div class="input-group" @click="showPopup3()">
              <label for="local">地址</label>
              <input type="text" id="local" name="local" v-model="local1" required placeholder="请选择地址"/>
            </div>
            <van-popup v-model="show3" position="button">
              <van-area title="请选择" :area-list="areaList" @confirm="onAreaConfirm1"  @cancel="onAreaCancel1" />
            </van-popup>
            <div class="input-group">
              <label for="detailLocal">详细地址</label>
              <input type="text" id="detailLocal" name="detailLocal" v-model="detailLocal1" required placeholder="请填写详细地址地址"  />
            </div>
            <button type="submit" class="btn" @click="updateAddress()">修改</button>
          </form>
        </div>
      </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { areaList } from '@vant/area-data'
import { Dialog } from 'vant'
export default {
  name: 'addressIndex',
  data () {
    return {
      value: false,
      show: false,
      show1: false,
      show2: false,
      show3: false,
      index: '',
      local: '',
      local1: '',
      detailLocal: '',
      detailLocal1: '',
      user: '',
      user1: '',
      phone: '',
      areaList
    }
  },
  created () {
    this.getAddressList()
    this.test()
  },
  computed: {
    ...mapState('address', ['addresses'])
  },
  methods: {
    updateAddress () {
      const index = this.index
      const user = this.user1
      const local = this.local1
      const detailLocal = this.detailLocal1
      Dialog.confirm({
        title: '温馨提示',
        message: '是否将该地址设为默认地址？'
      }).then(() => {
        this.$store.dispatch('address/updateAddressAction', {
          mode: '默认',
          user,
          local,
          detailLocal
        })
        this.show = false
      }).catch(() => {
        // 用户点击取消时，关闭地址选择弹出框
        if (this.addresses.newAddressList.length === 0) {
          this.$store.dispatch('address/updateAddressAction', {
            mode: '默认',
            user,
            local,
            detailLocal
          })
          this.show = false
        } else {
          this.$store.dispatch('address/updateAddressAction', {
            index,
            mode: '非默认',
            user,
            local,
            detailLocal
          })
          this.show2 = false
        }
      })
      // 重置表单数据
      this.user1 = ''
      this.local1 = ''
      this.detailLocal1 = ''
      this.index = ''
    },
    deleteAddress (index) {
      Dialog.confirm({
        title: '温馨提示',
        message: '是否删除该地址？'
      }).then(() => {
        this.$store.dispatch('address/deleteAddressAction', index)
      }).catch(() => {})
    },
    selDefaultAddress (index) {
      Dialog.confirm({
        title: '温馨提示',
        message: '是否将该地址设为默认地址？'
      }).then(() => {
        this.$store.dispatch('address/setDefaultAddressAction', index)
      }).catch(() => {})
    },
    getSpecialItem (index) {
      if (this.addresses.newAddressList[index].mode === '默认') {
        return 'special-item1'
      }
      return 'special-item2'
    },
    test () {
    },
    showPopup () {
      this.show = !this.show
    },
    showPopup1 () {
      this.show1 = !this.show1
    },
    showPopup2 (index) {
      this.show2 = !this.show2
      this.index = index
    },
    showPopup3 () {
      this.show3 = !this.show3
    },
    getAddressList () {
      this.$store.dispatch('address/getAddressAction')
    },
    addLocal () {
      // 在这里处理表单提交
      const user = this.user
      const phone = this.phone
      const local = this.local
      const detailLocal = this.detailLocal

      Dialog.confirm({
        title: '温馨提示',
        message: '是否将该地址设为默认地址？'
      }).then(() => {
        this.$store.dispatch('address/addAddressAction', {
          mode: '默认',
          user,
          phone,
          local,
          detailLocal
        })
        this.show = false
      }).catch(() => {
        // 用户点击取消时，关闭地址选择弹出框
        if (this.addresses.newAddressList.length === 0) {
          this.$store.dispatch('address/addAddressAction', {
            mode: '默认',
            user,
            phone,
            local,
            detailLocal
          })
          this.show = false
        } else {
          this.$store.dispatch('address/addAddressAction', {
            mode: '非默认',
            user,
            phone,
            local,
            detailLocal
          })
          this.show = false
        }
      })
      // 重置表单数据
      this.user = ''
      this.phone = ''
      this.local = ''
      this.detailLocal = ''
    },
    onAreaConfirm (selectedValues) {
      const local = selectedValues.map(value => value.name).join(' ')
      this.local = local
      this.show1 = false
    },
    onAreaCancel () {
    // 用户点击取消时，关闭地址选择弹出框
      this.show1 = false
    },
    onAreaConfirm1 (selectedValues) {
      const local = selectedValues.map(value => value.name).join(' ')
      this.local1 = local
      this.show3 = false
    },
    onAreaCancel1 () {
    // 用户点击取消时，关闭地址选择弹出框
      this.show3 = false
    }

  }
}
</script>
<style>
.body {
  background-color: #f5f5f5;
  height: auto;
  min-height: 100vh;
}
.addresses1,
.addresses {
  height: auto;
  min-height: 100px;
  width: 100%;
  margin-bottom: 50px;
}
.addresses1 {
  text-align: center;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:red;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  margin-top: 10px;

}
.special-item1 {
  border:red 1px solid;
}
.special-item2 {
  border:black 1px solid;
}
.addresses .address {
  height: 150px;
  width: 95%;
  padding: 5px;
}
.addresses .address1,
.addresses .address2,
.addresses .address3 {
  display: flex;
}
.addresses .address1,
.addresses .address3{
  height: 30%;
  width: 100%;
}
.addresses .address2{
  height: 40%;
  width: 100%;
  padding-left: 5px;
  padding-top: 5px;
}
.addresses .address1 .name {
  width: 25%;
  height: 100%;
  font-size: 20px;
  padding-top: 3px;
  padding-left: 5px;
  font-weight: bold;
}
.addresses .address1 .phone {
  width: 75%;
  height: 100%;
  font-size: 20px;
  padding-top: 5px;
  font-weight: bold;
}
.addresses .address3{
  display: flex;
}
.addresses .address3-left{
  width: 50%;
  padding-left: 5px;
  padding-top: 10px;
  font-size: 15px;
}
.addresses .address3-left .selDefault{
  width: 65%;
  height: 80%;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  background-color: #f5f5f5;
  border-radius: 5%;
}
.addresses .address3-right{
  width: 50%;
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
}
.addresses .address3-right .del,
.addresses .address3-right .change{
  width: 30%;
  height: 80%;
  font-size: 15px;
  text-align: center;
  line-height: 35px;
  background-color: #f5f5f5;
  border-radius: 5%;
}
.footer {
  height: 50px;
  background-color: white;
  position: fixed;
  bottom: 0;
  padding: 5px;
  width: 100%;
}
.footer .add{
  width: 100%;
  height: 100%;
  background-color:red;
  border-radius: 5%;
  color:white;
  text-align: center;
  line-height: 40px;
}
.van-popup{
  width: 100%;
  height: 100vh;
  z-index: 9999999;
}
.add-address{
  width: 100%;
  height: 100vh;
  background-color: white;
  margin-top: 50px;
}
.updateAdd-address{
  width: 100%;
  height: 100vh;
  background-color: white;
}
</style>
